<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%- include ../taglibs/layout_head.ejs%>
    <%- include ../taglibs/layout.css.ejs%>
    <link rel="stylesheet" href="js/mapPlugins/css/DrawingManager_min.css" type="text/css">
    <link rel="stylesheet" href="js/mapPlugins/css/SearchInfoWindow_min.css" type="text/css">
    <link href="js/plugins/zTree/css/metroStyle/metroStyle.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/monitor/monitor.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5pOe9cqol0NaNdEbtvTXMC9h"></script>
    <script type="text/javascript" src="js/mapPlugins/DrawingManager.js"></script>
    <script type="text/javascript" src="js/mapPlugins/SearchInfoWindow_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
    <script type="text/javascript">
        String.prototype.replaceAll = function (reallyDo, replaceWith) {
            return this.replace(new RegExp(reallyDo, ("gm")), replaceWith);
        };
        var isMapPanto=false;
        var parentMenuList = '<%= parentMenuList%>';
        var  sysMap = '<%= sysMap%>';
        var _parentMenuList,
            _sysMap;
        if(parentMenuList !="false"){
            if(parentMenuList.indexOf("&quot;") != -1){
                _parentMenuList = parentMenuList.replaceAll("&quot;", "\"");
            }else if(parentMenuList.indexOf("&#34;") != -1){
                _parentMenuList = parentMenuList.replaceAll("&#34;", "\"");
            }
            window.sessionStorage.setItem("rootMenus",_parentMenuList);
        }
        if(sysMap !="false"){
            if(sysMap.indexOf("&quot;") != -1){
                _sysMap = sysMap.replaceAll("&quot;", "\"");
            }else if(sysMap.indexOf("&#34;") != -1){
                _sysMap = sysMap.replaceAll("&#34;", "\"");
            }
            window.sessionStorage.setItem("chidlMenus",_sysMap)
        }
    </script>
    <style type="text/css">
        body, html,#mymap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        @keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        @-moz-keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        @-o-keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        @-webkit-keyframes doggeAnation {
            0%{
                opacity: 0.1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0.9;
            }
        }
        .arrowLeft{
            position: absolute;
            right: 0;
            top:50%;
            font-size: 32px;
            cursor: pointer;
            animation: doggeAnation 3s infinite;
            -webkit-animation: doggeAnation 3s infinite ;
            -moz-animation:doggeAnation 3s infinite ;
            -o-animation: doggeAnation 3s infinite;
            z-index:10011
        }
        .arrowRight{
            position: absolute;
            left: 3px;
            top:50%;
            font-size: 32px;
            cursor: pointer;
            animation: doggeAnation 3s infinite;
            -webkit-animation: doggeAnation 3s infinite ;
            -moz-animation:doggeAnation 3s infinite ;
            -o-animation: doggeAnation 3s infinite;
            z-index:1009;
            display: none;
        }
        .nav-body{
            padding:0
        }
        #treeview > ul.list-group{
            width: 300px;
        }
        /*.bottom-table-box .fixed-table-container{*/
        /*height: 150px!important;*/
        /*max-height: 150px!important;*/
        /*overflow-y: auto;*/
        /*}*/
        .warningInfoTableDiv .fixed-table-container{
            height: 150px!important;
            max-height: 150px!important;
            overflow-y: auto;
        }
        .BMap_noprint.anchorTR{
            top: 48px !important;
        }
        .provder-box{
            position: fixed;
            top:0;
            left: 50%;
            /*bottom: -10px!important;*/
            /*right: -15px!important;*/
            width: 260px;
            /*margin: 20px;*/
            margin-left: -130px;
            z-index: 1060;
            display: none;
            /*max-width: 276px;*/
            padding: 1px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            text-decoration: none;
            text-shadow: none;
            text-transform: none;
            letter-spacing: normal;
            word-break: normal;
            word-spacing: normal;
            word-wrap: normal;
            white-space: normal;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 1px solid #ccc;
            border: 1px solid rgba(0,0,0,.2);
            border-radius: 6px;
            -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
            box-shadow: 0 5px 10px rgba(0,0,0,.2);
            line-break: auto;
        }
        .provder-box-content{
            padding: 9px 14px;
        }
        .provder-box-content > p{
            margin: 0 0 10px;
        }
        .provder-box > .arrow{
            bottom: -11px;
            left: 50%;
            margin-left: -11px;
            border-top-color: #999;
            border-top-color: rgba(0,0,0,.25);
            border-bottom-width: 0;
        }

    </style>
</head>
<body>
<%-include("../taglibs/header.ejs",{params:{className:"active",monitorIsActive:"true"}})%>
<div class="nav-body" id="divContent">
    <div class="monitor-box">
        <div class="monitor-box-head">
            <ul id="head-Tab">
                <!--<li tabCode = "1">
                    <img src="images/page3/超速_u1088.png">
                    <span class="text">
                        超速
                    </span>
                </li>
                <li tabCode = "3">
                    <img src="images/page3/行驶_u1092.png">
                    <span class="text">
                        行驶
                    </span>
                </li>
                <li tabCode = "0">
                    <img src="images/page3/停车_u1089.png">
                    <span class="text">
                        停车
                    </span>
                </li>
                <li tabCode = "2">
                    <img src="images/page3/离线_u1091.png">
                    <span class="text">
                    离线
                </span></li>
                <li tabCode = "4">
                    <img src="images/page3/blue_car.png">
                    <span class="text">
                    在线
                </span></li>
                <li tabCode = "5">
                    <img src="images/page3/wenao_img.png" style="width: 20px; height: 20px;">
                    <span class="text">
                    未定位
                    </span></li>
                <li tabCode = "5">
                    <img src="images/page3/jianhao.png" style="width: 20px; height: 20px;">
                    <span class="text">
                    停车超时
                </span>
                </li>-->
                <li tabCode = "1">
                    <img src="js/mapPlugins/img/car_online1.png">
                    <span class="text">
                        异常
                    </span>
                </li>
                <li tabCode = "3">
                    <img src="js/mapPlugins/img/car_online.png">
                    <span class="text">
                        行驶
                    </span>
                </li>
                <li tabCode = "0">
                    <img src="js/mapPlugins/img/car_online3_0.fw.png">
                    <span class="text">
                        停车
                    </span>
                </li>
                <li tabCode = "2">
                    <img src="js/mapPlugins/img/car_online2.png">
                    <span class="text">
                    离线
                </span></li>
            </ul>
        </div>
        <div class="guanzhu" id="guanzhu">
            <img id="u1291_img" class="img " src="images/page3/u1291.png" tabindex="0" style="outline: none;">
            <img id="u1292_img" class="img " src="images/page3/u1292.png">
        </div>
        <div class="font-default guanzhu-box" id="guanzhu-box-content">
            <ul class="menu-box">
                <li>
                    <a id="guanzhu-btn">
                        <span class="box-img">
                            <img id="u1289_img" class="img " src="images/page3/u1289.png">
                        </span>
                        <span class="text">关注</span>
                    </a>
                    <div class="guanzhu-num" id="guanzhu-num">
                        <em class="guanzhu-num-val">0</em>
                    </div>
                </li>
                <li>
                    <a id="dianziweilan">
                        <span class="box-img">
                            <img id="u1280_img" class="img " src="images/page3/dianzi.png">
                        </span>
                        电子围栏
                    </a>
                </li>
                <li>
                    <a>
                        <span class="box-img">
                            <img id="u1268_img" class="img " src="images/page3/u1268.png">
                        </span>
                        单次点名
                    </a>
                </li>
                <li>
                    <a>
                        <span class="box-img">
                            <img id="u1271_img" class="img " src="images/page3/u1271.png">
                        </span>
                        区域查车
                    </a>
                </li>
                <li>
                    <a>
                        <span class="box-img">
                            <img id="u1274_img" class="img " src="images/page3/u1274.png">
                        </span>
                        解除报警
                    </a>
                </li>
                <li>
                    <a onclick="openDis()">
                        <span class="box-img">
                            <img id="u1277_img" class="img " src="images/page3/u1277.png">
                        </span>
                        测距
                    </a>
                </li>
                <li>
                    <a>
                        <span class="box-img">
                            <img id="u1286_img" class="img " src="images/page3/u1286.png">
                        </span>
                        标注设定
                    </a>
                </li>
                <!--<li>-->
                    <!--<a>-->
                        <!--<span class="box-img">-->
                            <!--<img id="u1280_img" class="img " src="images/page3/u1280.png">-->
                        <!--</span>-->
                        <!--锁车-->
                    <!--</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a>-->
                        <!--<span class="box-img">-->
                            <!--<img id="u1283_img" class="img " src="images/page3/u1283.png">-->
                        <!--</span>-->
                        <!--解锁-->
                    <!--</a>-->
                <!--</li>-->
            </ul>
        </div>
        <div id="myMapParent" style="position: relative;display: block;width: 100%">
            <div id="mymap">

            </div>
        </div>
        <!--<i class="fa fa-angle-double-right arrowRight"-->
        <!--aria-hidden="true"-->
        <!--&gt;</i>-->
        <div class="left-tree-arrow" id="left-tree-arrow">
            <img src="images/page3/right-arrow.png">
        </div>
        <div class="left-box" id="left-box-id">
            <div class="left-box-header">
                <div class="div-title">
                    <span>
                        实时监控
                    </span>
                </div>
                <div class="left-tree-bottom-arrow" id="bottom-arrow">
                    <img src="images/page3/left-arrow.png">
                </div>
            </div>
            <div class="left-tree" id="left-tree">
                <div class="left-head">
                    <div class="left-head-tab" id="left-head-tab">
                        <div id="everyCar">
                            <span class="text active">
                                全部(<span class = "allCar">0</span>)
                            </span>
                        </div>
                        <div id="onlineCar">
                            <span class="text">
                            在线(<span class="onCar">0</span>)
                                </span>
                            </div>
                        <div id="unOnlineCar">
                                <span class="text">
                                离线(<span class="upCar">0</span>)
                                </span>
                        </div>
                    </div>
                    <!--<i id="bottom-arrow" class="fa fa-chevron-left"-->
                    <!--style="color: #6dcff6;-->
                    <!--cursor: pointer;-->
                    <!--position: absolute;-->
                    <!--top: 5px;-->
                    <!--right: 2px;font-size: 18px"></i>-->
                </div>
                <div class="left-search">
                    <input type="text" class="form-control" id="deviceInfo" placeholder="查询设备">
                    <span class="search-img" id="search-icon">
                    <img src="images/page3/u1242.png" class="img">
                </span>
                </div>
                <div id="treeview"
                     style="position: absolute;
                     max-height: 80%;overflow-y: auto;
width: 100%;overflow-x: auto;
    max-width: 236px;">
                </div>
                <!--<div class="left-tree-bottom-arrow" id="bottom-arrow">-->
                    <!--<img src="images/page3/左上角_u1239.png">-->
                <!--</div>-->
                <!--<i class="fa fa-angle-double-left arrowLeft" aria-hidden="true"></i>-->
            </div>
        </div>

        <ul class="rightkey-box" id="rightkey-box">
            <!--<li id="car-info-dialog">-->
                <!--车辆信息-->
            <!--</li>-->
            <li id="viewCarInfo">
                车辆信息
            </li>
            <li id="openPower">
                通电
            </li>
            <li id="closePower">
                断电
            </li>
            <li>
                重启设备
            </li>
            <!--<li>-->
                <!--锁车-->
            <!--</li>-->
            <!--<li>-->
                <!--解锁-->
            <!--</li>-->
            <!--<li>-->
                <!--设置IP-->
            <!--</li>-->
            <!--<li>-->
                <!--回传时间-->
            <!--</li>-->
            <li id="settingIp">
                设置IP
            </li>
            <li id="settingTime">
                回传时间
            </li>
            <li>
                超速报警设置
            </li>
            <li>
                里程设置
            </li>
            <li>
                远程升级
            </li>
            <li>
                停车超时设置
            </li>
            <li>
                疲劳驾驶设置
            </li>
            <li class="hover-box">
                原地设防
                <img
                        id="u1147_img"
                        class="img "
                        style="border-width: 0px;
                         width: 20px;
                         height: 20px;
                        float: right;
                         margin-top: 5px;" src="images/page3/右箭头_u1147.png">
                <ul id="hover-box-ul">
                    <li>
                            <span>
                                设防
                            </span>
                    </li>
                    <li>
                          <span>
                             撤防
                          </span>
                    </li>
                </ul>
            </li>
            <li>
                道路行驶参数设置
            </li>
            <li>
                透传下发
            </li>
            <li>
                单次点名
            </li>
            <li>
                轨迹回放
            </li>
        </ul>
        <div class="bottom-box" id="bottom-box">
            <div class="bottom-top-arrow" id="bottom-top-arrow">
                <img src="images/page3/bottom-arrow.png">
            </div>
            <div class="bottom-header" id="bottom-header">
                <div class="bottom-header-tab active" tableid = "carInfoTableDiv">
                    <span>
                        车辆实时信息
                    </span>
                </div>
                <div class="bottom-header-tab" tableid = "warningInfoTableDiv">
                    <span>
                        报警信息
                    </span>
                </div>
                <div class="bottom-header-tab" tableid = "opInfoTableDiv">
                    <span>
                        操作信息
                    </span>
                </div>
                <div class="bottom-header-msg">
                    (
                    <span>
                        全部：
                    </span>
                    <span class="allCar">
                        0
                    </span>
                    <span >
                        在线：
                    </span>
                    <span class="onCar">
                        0
                    </span>
                    <span>
                        离线：
                    </span>
                    <span class="upCar">
                        0
                    </span>
                    <span>
                        行驶：
                    </span>
                    <span class="runNum">
                        0
                    </span>
                    <span >
                        停车：
                    </span>
                    <span class="stopNum">
                        0
                    </span>
                    <span>
                        在线率：
                    </span>
                    <span class="speedRate">
                        0%
                    </span>
                    )
                </div>
            </div>
            <div class="bottom-table" >
                <div class="bottom-table-box" tableid = "carInfoTableDiv">
                    <table class="table-responsive" id="carInfoTable" style="min-width: 1440px"></table>
                </div>
                <div class="bottom-table-box warningInfoTableDiv" tableid = "warningInfoTableDiv" style="display: none">
                    <table class="table-responsive" id="warningInfoTable" style="height: 100px !important;"></table>
                </div>
                <div class="bottom-table-box" tableid = "opInfoTableDiv" style="display: none">
                    <table class="table-responsive" id="opInfoTable"></table>
                </div>
            </div>
        </div>
        <div class="bottom-box-arrow" id="bottom-box-arrow">
            <img src="images/page3/top-arrow.png">
        </div>


    </div>
    <div class="monitor-dialog" id="onlineDialog" style="display: none">
        <div class="monitor-dialog-head">
                <span >
                        在线车辆（<span class="onCar">0</span>）
                </span>
            <span class="button-box" id="exportONlineCar">
                    导出
                </span>
            <button type="button" id="onlineClose" class="closebtn head-btn-close" data-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="monitor-dialog-body">
            <div class="monitor-dialog-content">
                <table id="onlineCarInfoTable" style="height: 335px;max-height: 335px;overflow-y: auto"></table>
            </div>
        </div>
    </div>
    <div class="monitor-dialog outlineDialog" id="unonlineDialog" style="display: none">
        <div class="monitor-dialog-head">
                <span>
                        离线车辆（<span class="upCar">0</span>）
                </span>
            <span class="button-box" id="exportUnONlineCar">
                    导出
                </span>
            <button type="button" id="unOnlineClose" class="closebtn head-btn-close" data-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="monitor-dialog-body">
            <div class="monitor-dialog-content">
                <table id="unOnlineCarInfoTable" style="height: 335px;max-height: 335px;overflow-y: auto"></table>
            </div>
        </div>
    </div>
    <div class="monitor-dialog" id="guanzhuDialog" style="display: none;border: 1px solid #344175;
    background-color: #344175;">
        <div class="monitor-dialog-head">
                <span>
                        关注
                </span>
            <button type="button" id="guanzhuClose" class="closebtn head-btn-close" data-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="monitor-dialog-body">
            <div class="monitor-dialog-content">
                <table id="guanzhuInfoTable" ></table>
            </div>
        </div>
    </div>
    <div id="carInfoDialog" style="display: none">
        <form id="carInfoForm" class="form-horizontal form-validBox" >
            <input id="id" name="id" type="hidden">
            <input id="baseTerminalId" name="baseTerminalId" type="hidden">
            <input id="baseCarTypeId" name="baseCarTypeId" type="hidden">
            <input id="deptId" name="deptId" type="hidden">
            <div class="form-group">
                <label for="baseCarNo" class="col-sm-3 control-label label-require">车牌号：</label>
                <div class="col-sm-8">
                    <input id="baseCarNo" name="baseCarNo" class="form-control"
                           type="text" aria-required="true"
                           aria-invalid="true" readonly="readonly">
                </div>
            </div>

            <div class="form-group">
                <label for="catCode" class="col-sm-3 control-label">车辆品牌：</label>

                <div class="col-sm-8">
                    <input id="baseCarBrand" name="baseCarBrand"
                           class="form-control"
                           type="text" aria-required="true"
                           aria-invalid="true" readonly="readonly">
                </div>
            </div>
            <div class="form-group">
                <label for="baseCarTypeName" class="col-sm-3 control-label label-require">车辆类型：</label>
                <div class="col-sm-8">
                    <input id="baseCarTypeName" name="baseCarTypeName"
                           class="form-control"
                           type="text"
                           aria-required="true" aria-invalid="true" readonly="readonly">
                </div>
            </div>

            <div class="form-group" id="isHiddenDiv">
                <label for="baseCarOutput" class="col-sm-3 control-label">排量：</label>
                <div class="col-sm-8">
                    <input type="text" id="baseCarOutput" name="baseCarOutput"
                           class="form-control" value="1" aria-required="true"
                           aria-invalid="true" readonly="readonly"
                    >
                </div>
            </div>
            <div class="form-group" id="isHiddenDiv">
                <label for="baseTerminaName" class="col-sm-3 control-label">设备编号：</label>
                <div class="col-sm-8">
                    <input id="baseTerminaName" name="baseTerminaName"
                           class="form-control"  type="text"
                           aria-required="true" aria-invalid="true" readonly="readonly">
                </div>
            </div>
            <div class="form-group" id="isHiddenDiv">
                <label for="baseTerminalSim" class="col-sm-3 control-label">SIM：</label>
                <div class="col-sm-8">
                    <input id="baseTerminalSim" name="baseTerminalSim"
                           class="form-control"  type="text"
                           aria-required="true" aria-invalid="true" readonly="readonly">
                </div>
            </div>
            <div class="form-group" id="isHiddenDiv">
                <label for="userName" class="col-sm-3 control-label">车主姓名：</label>
                <div class="col-sm-8">
                    <input id="userName" name="userName" class="form-control"
                           type="text" aria-required="true"
                           aria-invalid="true" readonly="readonly">
                </div>
            </div>
            <div class="form-group" id="isHiddenDiv">
                <label for="userPhone" class="col-sm-3 control-label">车主电话：</label>
                <div class="col-sm-8">
                    <input id="userPhone" name="userPhone" class="form-control"
                           type="text" aria-required="true"
                           aria-invalid="true" readonly="readonly">
                </div>
            </div>
            <div class="form-group" id="isHiddenDiv">
                <label for="baseCarName" class="col-sm-3 control-label">车辆别名：</label>
                <div class="col-sm-8">
                    <input id="baseCarName" name="baseCarName"
                           class="form-control"
                           type="text" aria-required="true"
                           aria-invalid="true" readonly="readonly">
                </div>
            </div>
            <div class="form-group" id="isHiddenDiv">
                <label for="baseCarFdNo" class="col-sm-3 control-label">发动机号：</label>
                <div class="col-sm-8">
                    <input id="baseCarFdNo" name="baseCarFdNo"
                           class="form-control"
                           type="text" aria-required="true"
                           aria-invalid="true" readonly="readonly">
                </div>
            </div>
            <div class="form-group" id="isHiddenDiv">
                <label for="baseCarJjNo" class="col-sm-3 control-label">车架号：</label>
                <div class="col-sm-8">
                    <input id="baseCarJjNo" name="baseCarJjNo"
                           class="form-control"
                           type="text" aria-required="true"
                           aria-invalid="true" readonly="readonly">
                </div>
            </div>
            <div class="form-group" id="isHiddenDiv">
                <label for="baseCarRlType" class="col-sm-3 control-label">燃料类型：</label>
                <div class="col-sm-8">
                    <input id="baseCarRlType" name="baseCarRlType"
                           class="form-control"
                           type="text"
                           aria-required="true" aria-invalid="true"  readonly="readonly">
                </div>
            </div>
            <div class="form-group" id="isHiddenDiv">
                <label for="baseCarOfProvince" class="col-sm-3 control-label">所属省份：</label>
                <div class="col-sm-8">
                    <input id="baseCarOfProvince" name="baseCarOfProvince"
                           class="form-control"  type="text"
                           aria-required="true" aria-invalid="true" readonly="readonly">
                </div>
            </div>
            <div class="form-group" id="isHiddenDiv">
                <label for="baseCarOfCity" class="col-sm-3 control-label">所属市区：</label>
                <div class="col-sm-8">
                    <input id="baseCarOfCity" name="baseCarOfCity"
                           class="form-control"
                           type="text" aria-required="true"
                           aria-invalid="true" readonly="readonly">
                </div>
            </div>
            <div class="form-group" id="isHiddenDiv">
                <label for="baseCarDis" class="col-sm-3 control-label">初始里程：</label>
                <div class="col-sm-8">
                    <input id="baseCarDis" name="baseCarDis"
                           class="form-control"
                           type="text" aria-required="true"
                           aria-invalid="true"
                           number="true" maxlength="10" readonly="readonly">
                </div>
            </div>
        </form>
    </div>
    <div class="monitor-dialog monitor-dialog-form" id="carDetailsDialog" style="display: none;z-index:10009">
        <div class="monitor-dialog-head">
                <span>
                    信息详情
                </span>
                <!--<span class="closebtn">-->
                    <!--<img src="images/page3/close_img.png">-->
                <!--</span>-->
            <button type="button" id="carDetailsDialogClose" class="closebtn head-btn-close" data-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="monitor-dialog-body" id="carDetailsInfo">
            <input id="id" name="id" type="hidden">
            <input id="baseTerminalId" name="baseTerminalId" type="hidden">
            <input id="baseCarTypeId" name="baseCarTypeId" type="hidden">
            <input id="deptId" name="deptId" type="hidden">
            <div class="monitor-dialog-content">
               <div class="msghead" style="background-color:#F1F5FB;padding:4px;">
                    <span style="color:#344175;font-size: 14px">
                        设备信息
                    </span>
               </div>
               <div class="msgbody" style="background-color: #FFF;padding: 6px 12px;font-size: 14px;height: 130px">
                    <div class="row" style="margin-right: 0;margin-left: 0;margin-bottom:6px; margin-top: 6px;">
                        <div class="col-sm-12" style="padding-left: 0;padding-right: 0">
                            <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                                <label style="display: inline-block">所属用户:</label>
                                <span name="deptName"></span>
                            </div>
                            <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                                <label style="display: inline-block">设备编号:</label>
                                <span  name="baseTerminalId"></span>
                            </div>
                            <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                                <label style="display: inline-block">SIM卡号:</label>
                                <span name="baseTerminalSim"></span>
                            </div>
                            <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                                <label style="display: inline-block">设备协议:</label>
                                <span name="baseTerminalProtocol"></span>
                            </div>
                        </div>
                    </div>
                   <div class="row" style="margin-right: 0;margin-left: 0;margin-bottom:6px; margin-top: 6px;">
                       <div class="col-sm-12" style="padding-left: 0;padding-right: 0">
                           <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                               <label style="display: inline-block">设备型号:</label>
                               <span name="baseProtocolType"></span>
                           </div>
                           <!--<div class="col-sm-3" style="padding-left: 0;padding-right: 0">-->
                               <!--<label style="display: inline-block">设备类别:</label>-->
                               <!--<span></span>-->
                           <!--</div>-->
                           <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                               <label style="display: inline-block">入网时间:</label>
                               <span name="baseTerminalExeTime"></span>
                           </div>

                           <!--<div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                               <label style="display: inline-block">到期时间:</label>
                               <span></span>
                           </div>-->
                           <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                               <label style="display: inline-block">服务年限:</label>
                               <span name="baseTerminalSetupLimited"></span>
                           </div>
                       </div>
                   </div>
                   <!--<div class="row" style="margin-right: 0;margin-left: 0;margin-bottom:6px; margin-top: 6px;">
                       <div class="col-sm-12" style="padding-left: 0;padding-right: 0">
                           <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                               <label style="display: inline-block">服务年限:</label>
                               <span name="baseTerminalSetupLimited"></span>
                           </div>
                       </div>
                   </div>-->
               </div>
            </div>
            <div class="monitor-dialog-content" style="margin-top: 8px">
                <div class="msghead" style="background-color:#F1F5FB;padding:4px;">
                    <span style="color:#344175;font-size: 14px">
                        车辆信息
                    </span>
                </div>
                <div class="msgbody" style="background-color: #FFF;padding: 6px 12px;font-size: 14px;height: 130px">
                    <div class="row" style="margin-right: 0;margin-left: 0;margin-bottom:6px; margin-top: 6px;">
                        <div class="col-sm-12" style="padding-left: 0;padding-right: 0">
                            <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                                <label style="display: inline-block">车牌号码:</label>
                                <span name="baseCarNo"></span>
                            </div>
                            <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                                <label style="display: inline-block">车辆品牌:</label>
                                <span name="baseCarBrand"></span>
                            </div>
                            <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                                <label style="display: inline-block">车辆类型:</label>
                                <span name="baseCarTypeId"></span>
                            </div>
                            <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                                <label style="display: inline-block">车辆颜色:</label>
                                <span name="baseBarColor"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-right: 0;margin-left: 0;margin-bottom:6px; margin-top: 6px;">
                        <div class="col-sm-12" style="padding-left: 0;padding-right: 0">
                            <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                                <label style="display: inline-block">车架号:</label>
                                <span name="baseCarJjNo"></span>
                            </div>
                            <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                                <label style="display: inline-block">车主姓名:</label>
                                <span name="userName"></span>
                            </div>
                            <div class="col-sm-3" style="padding-left: 0;padding-right: 0">
                                <label style="display: inline-block">车主电话:</label>
                                <span name="userPhone"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="monitor-dialog" id="chaijiDialog" style="display: none;border: 1px solid #344175;
    background-color: #344175;">
        <div class="monitor-dialog-head">
                <span>
                        拆机记录
                </span>
            <button type="button" id="chaijiDialogClose" class="closebtn head-btn-close" data-dismiss="modal" aria-hidden="true"></button>
        </div>
        <div class="monitor-dialog-body">
            <div class="monitor-dialog-content">
                <table id="chaijiInfoTable" ></table>
            </div>
        </div>
    </div>

   <!-- <div class="popover provder-box" id="provder-box">
        &lt;!&ndash;<div class="arrow">&ndash;&gt;
        &lt;!&ndash;</div>&ndash;&gt;
        <div class="provder-box-content">
            <p id="provder-box-p">车辆树正在刷新！</p>
        </div>
    </div>-->
</div>

<div class="modal inmodal" id="myPowerModal" role="dialog" data-width="500px"
     data-height="400px" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <h4 class="modal-title" id="powerTitle">通/断电</h4>
            </div>
            <div class="modal-body" style="max-height: 400px; ">
                <form class="form-horizontal m-t" method="get">
                    <div class="form-group">
                        <label class="col-sm-3 control-label label-require" style="font-size: 14px;">安全确认码：</label>
                        <div class="col-sm-8">
                            <input id="baseTerminalServicePw" name="baseTerminalServicePw" class="form-control"
                                   placeholder="安全确认码必填" type="password" aria-required="true"
                                   aria-invalid="true">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="closePowerModal" class="btn btn-white" >取消</button>
                <button type="button" id="suerPowerModal" class="btn btn-primary" >确认</button>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="settingModal" role="dialog" data-width="500px"
     data-height="400px" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <h4 class="modal-title" id="settingTitle">设置IP</h4>
            </div>
            <div class="modal-body" style="max-height: 400px; ">
                <form class="form-horizontal m-t" method="get">
                    <input type="hidden" id="nodeBaseProtocolType" name="nodeBaseProtocolType">
                    <input type="hidden" id="nodeBaseTerminalIds" name="nodeBaseTerminalIds">
                    <input type="hidden" id="carids" name="carids">
                    <div class="form-group" >
                        <label class="col-sm-3 control-label label-require" style="font-size: 14px;">车辆：</label>
                        <div class="col-sm-8">
                            <input type="text"
                                   class="form-control" id="caridName" name="caridName">
                            <button type="button" class="btn btn-theme selectCar"
                                    style="position: absolute;top: 0px;right: 0px;">选择</button>
                        </div>
                    </div>
                    <div class="form-group settingbox" id="ipBox" style="display: none">
                        <label class="col-sm-3 control-label label-require" style="font-size: 14px;">IP：</label>
                        <div class="col-sm-8">
                            <input id="ipName" name="ipName" class="form-control"
                                   placeholder="IP必填" type="text" aria-required="true"
                                   aria-invalid="true">
                        </div>
                    </div>
                    <div class="form-group settingbox" id="timeBox" style="display: none">
                        <label class="col-sm-3 control-label label-require" style="font-size: 14px;">回传时间：</label>
                        <div class="col-sm-8">
                            <input id="timeName" name="timeName" class="form-control"
                                   placeholder="" type="text" aria-required="true"
                                   aria-invalid="true">
                        </div>
                    </div>
                </form>
                <div id="fnmsg" style="display: block;padding: 15px;max-height: 120px;overflow-y: auto">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="cancelSetting" class="btn btn-white" >取消</button>
                <button type="button" id="suerSetting" class="btn btn-primary" >发送</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myCarTreeDialog">
    <div class="modal-dialog" style="width: 320px;">
        <div class="modal-content" style="width: 320px;">
            <div class="modal-header">
                <button type="button" class="close" onclick="closeTreeDialog()">×</button>
                <h4 class="modal-title" id="NoPermissionModalLabel">车辆</h4>
            </div>
            <div class="modal-body" style="height:320px;max-height:320px;max-width: 320px;
                overflow: auto;">
                <div class="input-group div-serch-input" style="margin-bottom: 10px;">
                    <input type="text" placeholder="请录入名称查询" class="input form-control" id="serchStrCar">
                    <span class="input-group-btn">
                                        <button type="button" class="btn btn btn-primary" onclick="queryMyCarTree()"
                                                style="background-color: #48bcb4;border-color: #48bcb4;">
                                            <i class="fa fa-search"></i> 搜索</button>
                                    </span>
                </div>
                <ul id="userCommonTree" class="ztree">
                </ul>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info"   type="button" onclick="getAllCheckNodes()">确 定</button>
            </div>
        </div>
    </div>
</div>
<%-include ../taglibs/layout.js.ejs%>
<script type="text/javascript">
    var pointCarId = "<%= pointCarId%>";
    var baseCarNum = "<%= baseCarNo%>";
    if(baseCarNum){
        $("#deviceInfo").val(baseCarNum)
    }else{
        $("#deviceInfo").val("")
    }
    window.treeJsonData = [];
    window.offLineTreeJson = [];
    window.treeDataSource = [];
    window.carTreeJSON = {};
    window.offlineStr = "";
    window.onlineStr = "";
    window.updatedTreeCars = {};
    window.updatedTreeNoCars = {};
    var isSelectTreeNode = false;
    window.isInterval=false;
    window.updateTreeNodes={
        deptNode:{

        },
        deviceNode:{

        },
        carNode:{

        }
    };
    window.deptsCarIdJson = {};
</script>
<script type="text/javascript" src="js/plugins/zTree/js/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" src="js/plugins/zTree/js/jquery.ztree.exhide-3.5.js"></script>
<script type="text/javascript" src="js/ztree/ztree-cus-check.js"></script>
<script type="text/javascript" src="js/ztree/ztree-user.js"></script>
<script type="text/javascript" src="js/socket.io/socket.io.js"></script>
<script type="text/javascript" src="js/socket.io/moment.min.js"></script>
<script type="text/javascript" src="js/socket.io/socket-util-cus.js"></script>
<script type="text/javascript" src="js/viewpage/monitor.js"></script>
<script type="text/javascript">

    var urlTree = '/tree/deptCar';
    $(function () {
        $("#myMapParent").css({"height":$(window).height()-72-36 + "px"});
        $("#bottom-box").css({"width":$(window).width()-242 + "px"});
        $(".arrowLeft").on("click",function () {
            $(this).hide();
            $("#left-tree").hide(300);
            $(".arrowRight").show();
        });
        $(".arrowRight").on("click",function () {
            $(this).hide();
            $("#left-tree").show(300);
            $(".arrowLeft").show();
        });
//        initCartree('id', 'parentId', 'name',  fnClick,fnCheck, "checkbox");
//        loadMyCarTree(urlTree,"userCommonTree",true);
        UserTreeComponents.initUserTree('id', 'parentId', 'name',fnClick,fnCheck, "checkbox");
        UserTreeComponents.loadUserTree(urlTree,"userCommonTree",true);
        $(".selectCar").on("click",function () {
            $("#myCarTreeDialog").modal("show");
        });
    })
    function openDis() {
        monitor_myDis.open();
    }
    /**
     *
     * @param id 当前节点id
     * @param pid 父节点id
     * @param name 显示名称
     */
    function initCartree(id,pid,name,fnClick,fnCheck,chkStyle){
        _idKey=id;
        _pIdKey=pid;
        _name=name;
        // _clickTree=flag;
        if(fnClick){
            _fnClick=fnClick;
        }
        if(fnCheck){
            _fnCheck=fnCheck;
        }
        var check={
            enable: false,
            // chkboxType: { "Y": "p", "N": "s" }
        };
        if(chkStyle){
            check={
                enable: true,
                chkStyle: chkStyle,
                // chkboxType: { "Y": "p", "N": "s" }
            };
        }
        setting = {
            view: {
                fontCss: getFontCss,
                selectedMulti: false,
                expandSpeed: "fast"
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: _idKey,
                    pIdKey: _pIdKey,
                    rootId: ""
                },
                key: {
                    name: _name
                }
            },
            check: check,
            callback: {
                onClick: _fnClick,
                onCheck: _fnCheck
            }
        }
    }
    function loadMyCarTree(url,treeid,asyncKey) {
        var ztreeId="kindTree";
        if(treeid){
            ztreeId=treeid;
        }
        $.ajax({
            async:asyncKey ? asyncKey : false,
            url: url,
            type: "post",
            dataType: 'json',
            success: function (data) {
                treeNodes_obj = data;
                for (var key in treeNodes_obj) {
                    treeNodes_obj[key].open = true;
                }
                zTree_obj = $.fn.zTree.init($("#"+ztreeId), setting, treeNodes_obj);
                tree_Obj = $.fn.zTree.getZTreeObj(ztreeId);
            }
        })
    }

    var fnCheck = function (event, treeId, treeNode) {
        //selectTreeNode(treeNode);
    }
    //    树节点选中
    var fnClick = function (event, treeId, treeNode) {
        selectTreeNode(treeNode);
    }
    function getAllCheckNodes() {
        var nodes = zTree_obj.getCheckedNodes(true);
        var nodeIds = [];
        var nodeNames = [];
        var nodeBaseTerminalIds = [];
        var nodeBaseProtocolType = [];
        for(var n = 0,_len=nodes.length;n<_len;n++){
            var _node =nodes[n];
            if(_node.id!=-99999 && !_node.isParent){
                nodeIds.push(_node.id);
                nodeNames.push(_node.name);
                nodeBaseTerminalIds.push(_node.baseTerminalId);
                nodeBaseProtocolType.push(_node.baseProtocolType);
            }
        }
        if(nodeIds.length){
            $("#caridName").val(nodeNames.toString());
            $("#carids").val(nodeIds.toString());
            $("#nodeBaseTerminalIds").val(nodeBaseTerminalIds.toString());
            $("#nodeBaseProtocolType").val(nodeBaseProtocolType.toString());
        }else{
            $("#caridName").val("");
            $("#carids").val("");
            $("#nodeBaseTerminalIds").val("");
            $("#nodeBaseProtocolType").val("");
        }
        closeTreeDialog();
    }
    function closeTreeDialog() {
        $("#myCarTreeDialog").modal("hide");
    }
    function queryMyCarTree() {
        var str = $("#serchStrCar").val();
        if(str){
            UserTreeComponents.searchZtree("kindTree","serchStrCar")
        }else{
            UserTreeComponents.loadUserTree(urlTree,"userCommonTree",true);
        }
    }
</script>
</body>
</html>